Highcharts লাইব্রেরি একটি অত্যন্ত শক্তিশালী টুল, যা ইন্টারঅ্যাকটিভ এবং ডায়নামিক চার্ট তৈরিতে ব্যবহৃত হয়। মাঝে মাঝে আমাদের প্রয়োজন হয় ডায়নামিক ডেটা আপডেট করতে, অর্থাৎ চার্টে প্রদর্শিত ডেটা পরিবর্তন হতে থাকে। Highcharts এই ধরনের ডেটা আপডেটের জন্য বেশ কিছু টেকনিক প্রদান করে। চলুন, এখানে কিছু সাধারণ টেকনিক নিয়ে আলোচনা করি যা আপনাকে Highcharts-এ ডাইনামিক ডেটা সিরিজ আপডেট করতে সহায়ক হবে।
১. setData() মেথড ব্যবহার করে ডেটা আপডেট
Highcharts এ সবচেয়ে সাধারণ এবং সহজ পদ্ধতি হলো setData() মেথড ব্যবহার করা। এই মেথড ব্যবহার করে আপনি সরাসরি সিরিজের ডেটা পরিবর্তন করতে পারেন এবং চার্টটিকে রেন্ডার করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Dynamic Data Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'ডাইনামিক ডেটা আপডেট উদাহরণ'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ৫ সেকেন্ড পর ডেটা আপডেট করা হবে
setInterval(function() {
var newData = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100];
chart.series[0].setData(newData);
}, 5000);
</script>
</body>
</html>
এখানে, ৫ সেকেন্ড পর পর setData() মেথড ব্যবহার করে সিরিজের ডেটা আপডেট করা হচ্ছে। এতে করে Sales সিরিজের ডেটা প্রতি ৫ সেকেন্ডে পরিবর্তিত হবে এবং চার্ট তা আপডেট করবে।
২. addPoint() মেথড ব্যবহার করে নতুন পয়েন্ট যোগ করা
কিছু ক্ষেত্রে আপনি নতুন পয়েন্ট যোগ করতে চাইবেন, তবে setData() এর পরিবর্তে addPoint() মেথড ব্যবহার করতে পারেন। এই মেথডটি নির্দিষ্ট সিরিজে নতুন ডেটা পয়েন্ট যোগ করতে ব্যবহৃত হয় এবং ডেটার এক্সিস্টিং পয়েন্টগুলো অপরিবর্তিত থাকে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Dynamic Data Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'নতুন পয়েন্ট যোগ করা'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ৩ সেকেন্ড পর একটি নতুন পয়েন্ট যোগ করা হবে
setInterval(function() {
var newPoint = Math.random() * 100;
chart.series[0].addPoint(newPoint);
}, 3000);
</script>
</body>
</html>
এখানে, প্রতি ৩ সেকেন্ড পর একটি নতুন পয়েন্ট addPoint() মেথডের মাধ্যমে সিরিজে যোগ করা হচ্ছে। এটি চার্টের ডেটাকে ক্রমাগত সম্প্রসারিত করে।
৩. update() মেথড ব্যবহার করে সিরিজ কাস্টমাইজ করা
update() মেথডের মাধ্যমে আপনি পুরো সিরিজের ডেটা কাস্টমাইজ করতে পারেন, যেমন সিরিজের টাইপ, রঙ, বা টাইটেল পরিবর্তন করা। এটি মূলত সিরিজের প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Series Update Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'সিরিজ কাস্টমাইজেশন'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ৪ সেকেন্ড পর সিরিজের টাইপ এবং ডেটা আপডেট করা হবে
setInterval(function() {
chart.series[0].update({
type: 'column', // চার্টের টাইপ পরিবর্তন
data: [15, 25, 35, 45, 55] // নতুন ডেটা
});
}, 4000);
</script>
</body>
</html>
এখানে, প্রতি ৪ সেকেন্ড পর সিরিজের টাইপ পরিবর্তন করা হচ্ছে (লাইন থেকে কলাম চার্টে) এবং ডেটাও আপডেট করা হচ্ছে।
৪. removePoint() মেথড ব্যবহার করে পয়েন্ট মুছে ফেলা
আপনি যদি চান যে ডেটা সিরিজের থেকে কিছু পয়েন্ট মুছে ফেলা হোক, তবে removePoint() মেথড ব্যবহার করতে পারেন। এটি নির্দিষ্ট পয়েন্ট মুছে ফেলার জন্য ব্যবহৃত হয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Remove Point Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'পয়েন্ট মুছে ফেলা'
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
// ২ সেকেন্ড পর প্রথম পয়েন্ট মুছে ফেলা হবে
setInterval(function() {
chart.series[0].removePoint(0);
}, 2000);
</script>
</body>
</html>
এখানে প্রতি ২ সেকেন্ড পর প্রথম পয়েন্ট removePoint() মেথডের মাধ্যমে মুছে ফেলা হচ্ছে।
উপসংহার
Highcharts ডায়নামিক ডেটা আপডেটের জন্য বেশ কয়েকটি কার্যকরী টেকনিক প্রদান করে। setData(), addPoint(), update(), এবং removePoint() মেথডগুলি আপনাকে ডেটা সিরিজকে পরিবর্তন, সম্প্রসারণ বা মুছে ফেলার সুযোগ দেয়, যাতে চার্টটি বাস্তব সময়ে আপডেট হতে থাকে। এই টেকনিকগুলো বিভিন্ন প্রকারের ডেটা ভিজুয়ালাইজেশন কাজের জন্য অত্যন্ত সহায়ক।
Read more
